路由 npm i react-router-dom@6.4.1
configuring-routes 官網
react-router 使用方法
確認自己記住了 React Router 從安裝到設定的方法。
在官網上找到實作的原型，並區分出需要客製化的段落。
說明 HomePage 和其他三條路由的關係。
- HomePage的path屬性是
*，意思是除了路由切換 login, signup, todo頁面外，其他的路由字串都會導向HomePage。
Q1: 為什麼路由通常在後端設定？
路由在應用程式中扮演著將請求映射到特定端點或功能的角色。雖然在前端也存在一些路由處理機制，但在後端設定路由有幾個原因：
統一控制: 後端路由可以統一管理應用程式中所有端點的路由。這樣的設計可以讓開發人員在後端掌握路由配置，確保端點間的一致性和統一性。
安全性: 後端路由能夠控制對端點的訪問權限，實現安全訪問。這包括驗證和授權用戶對特定端點的訪問權限，確保敏感資源不被未授權的用戶訪問。
伺服器渲染（SSR）: 在某些情況下，後端路由是實現伺服器渲染（SSR）的關鍵。透過後端路由配置，可以確保伺服器能夠根據路由來動態生成頁面內容，提供更好的性能和 SEO。
兼容性: 某些情況下，特定端點的路由需要進行多種後續處理，例如從數據庫中擷取資料、處理業務邏輯等。這些操作通常需要在後端完成。
雖然後端路由控制著端點和資源的訪問，但現代 Web 應用程序中，前端路由（例如在 React 或 Vue 中）也扮演了重要角色。前端路由可以實現單頁應用（SPA）中的客戶端路由功能，使用戶能夠在應用程式中進行快速、無需重新加載頁面的導航。兩者通常協同工作，提供了更完整的應用程序路由解決方案。
Q2:在前端設定 Router 是什麼意思？
在前端設定 Router 意味著在客戶端（瀏覽器端）使用特定的 JavaScript 庫或框架來處理應用程式的路由。
常見於單頁應用（Single Page Application，SPA）(一頁式網頁)。使用前端 Router 意味著應用程式的不同端點（URL）或路徑與特定的 UI 元件或頁面相關聯。當用戶在應用程式中進行導航時，前端 Router 會根據 URL 的變化，動態地渲染出對應的 UI 元件或頁面，而無需整個頁面的重新加載。
例如，在 React 中，你可以使用 React Router 來在前端設定路由。你會定義不同的
<Route>，每個<Route>會與特定的 URL 或路徑相匹配，並指定要渲染的 React 元件。當用戶進行導航或 URL 變化時，React Router 會根據定義的路由規則動態地渲染對應的元件到應用程式中。總之，在前端設定 Router 意味著利用客戶端的 JavaScript 處理應用程式的路由，使得用戶能夠在單頁應用中進行流暢的導航和視覺上的變化，而不需重新加載整個頁面。
Q3: 為什麼開啟 React Router 的文件，但在安裝套件時用的卻是 npm i react-router-dom ？
與 React Router 相關的三個主要套件，各提供不同的功能。
react-router: 主要提供 React Router 的核心功能，包括路由的定義、管理和hooks等。通常用於沒有 DOM 環境的情況下，例如 React Native 等。
react-router-native：包含 react-router 的所有功能，並添加了一些特定於 React Native 的 API。
react-router-dom: 這個套件建立在 react-router 之上 ( 即包含 react-router 的所有功能 )，提供了在網頁瀏覽器中使用 React Router 所需的額外功能，比如
<BrowserRouter>、<Link>、<Route>等，用於建立路由和導航，添加了一些特定於 DOM 的 API，通常用於基於瀏覽器的 React 應用程式中。React Router 是 React App 中用於在不同檢視元件之間進行路由的常見標準函式庫。它有助於將使用者介面與網址保持同步。此外，React Router 允許定義特定網址要顯示的檢視。
所以當你在開啟 React Router 的文件時，如果你的目標是建立基於瀏覽器的 React 應用程式，你應該安裝 react-router-dom 套件。這個套件提供在網頁App中使用 React Router 所需的功能和元件。
筆記連結
Single Page Applicationㄝ, SPA 一頁式網頁
SSR
